<div data-test-page-header class="bg-gray-50 border-b border-gray-200 p-4 mb-8 flex flex-col gap-4 md:flex-row md:items-center justify-between dark:border-gray-800/50 dark:bg-inherit">
  <div class="flex flex-col gap-3 pt-1">
    <% breadcrumb_links = build_breadcrumb_links(request.path, class: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 no-underline") %>
    <% if breadcrumb_links.present? %>
      <nav aria-label="breadcrumb">
        <ol class="flex flex-wrap gap-1 text-sm">
          <% breadcrumb_links.each_with_index do |link, index| %>
            <li class="inline-flex items-center h-5 gap-1">
              <% if index > 0 %>
                <svg class="h-5 w-5 text-gray-300 dark:text-gray-700 shrink-0 rtl:rotate-180" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd"/>
                </svg>
              <% end %>
              <%= link %>
            </li>
          <% end %>
        </ol>
      </nav>
    <% end %>
    <h2 class="text-2xl font-semibold"><%= title %></h2>
  </div>
  <% if action_items_for_action.present? %>
    <div data-test-action-items class="flex gap-2 flex-wrap lg:justify-end">
      <%= render "active_admin/shared/action_items" %>
    </div>
  <% end %>
</div>
